<template>
  <view class="container">
    <nav-bar title="账户管理" :showBack="true"></nav-bar>

    <view class="content">
      <!-- 菜单列表 -->
      <view class="menu-wrapper">
        <!-- 个人资料 -->
        <view class="menu-item" @click="navigateTo('/pages/account/profile')">
          <text class="menu-text">个人资料</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
        <!-- 公寓资料 -->
        <view class="menu-item" @click="navigateTo('/pages/account/apartment')">
          <text class="menu-text">公寓资料</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
        <!-- 账户与安全 -->
        <view class="menu-item" @click="navigateTo('/pages/account/security')">
          <text class="menu-text">账户与安全</text>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-wrapper">
        <view class="logout-btn" @click="handleLogout">
          <text>退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'

export default {
  components: {
    NavBar
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 执行退出登录逻辑
            uni.removeStorageSync('token')
            uni.reLaunch({
              url: '/pages/main/index'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.menu-wrapper {
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  margin: 0 15rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  background-color: #fff;
  position: relative; // 添加相对定位

  &::after {
    // 使用伪元素实现短分割线
    content: '';
    position: absolute;
    left: 32rpx;
    right: 32rpx;
    bottom: 0;
    height: 1rpx;
    background-color: #e5e5e5;
  }

  &:last-child::after {
    display: none; // 最后一项不显示分割线
  }

  .menu-text {
    font-size: 28rpx;
    color: #333;
  }
}

.logout-wrapper {
  margin: 20rpx 15rpx 0;
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
}

.logout-btn {
  text-align: center;
  padding: 32rpx 0;

  text {
    font-size: 28rpx;
    color: #333;
  }
}
</style>